<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport"/>
    <link crossorigin="" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          rel="stylesheet"/>
    <script crossorigin=""
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <style>
            body {
                padding: 0;
                margin: 0;
            }
            html, body, #mapid {
                height: 100%;
            }







    </style>
</head>
<body>
<div id="mapid"></div>
<script type="text/javascript">
               function setLocation() {

                if(typeof Android !== "undefined" && Android !== null) {
                    let locations = Android.setLocation()
                    let lastLocation = Android.ge
                    console.log('Locations: ', locations)
                    return JSON.parse(locations);
                } else {
                    alert("Not viewing in webview");
                    console.log('Not viewing in webview')
                }
            }

             let data = setLocation()

                var mymap = L.map('mapid').setView([data.latitude, data.longitude], 13);



                L.tileLayer(
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        maxZoom: 15,
                        minZoom: 1
                     }
                ).addTo(mymap)

                function buildMarker(data) {
                var i;

                let svg = `
					    <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">

					      <circle cx="50" cy="50" r="35" stroke="#2088b7" stroke-width="3" fill="#2088b7" class="blob" >
					        <animate attributeType="SVG" attributeName="r" begin="0s" dur="1.5s" repeatCount="indefinite" from="5%" to="25%"/>
					        <animate attributeType="CSS" attributeName="stroke-width" begin="0s"  dur="1.5s" repeatCount="indefinite" from="3%" to="0%" />
					        <animate attributeType="CSS" attributeName="opacity" begin="0s"  dur="1.5s" repeatCount="indefinite" from="1" to="0"/>
					      </circle>
					    </svg>`;
					  let iconUrl = encodeURI("data:image/svg+xml," + svg).replace(/#/g,'%23');

					  // ** Add new marker to map **
					  let icon = L.icon({
					    iconSize: [50, 50],
					    iconAnchor: [40, 40],
					    popupAnchor: [-20, -40]
					  });
					  let leafletMarker = L.marker(
					    L.latLng(
					      data.latitude,
					      data.longitude
					    )//, {icon: icon}
					  );

                      let description = "(" + data.latitude + ", " +  data.longitude + ")"

					  leafletMarker.addTo(mymap)
					    .bindPopup(description)
                        .openPopup();


                  /*L.circleMarker([data.latitude, data.longitude], {
                    radius: 32,
                    fillOpacity: 0.5
                  }).addTo(mymap);*/
            }

            buildMarker(data)







</script>

</body>
</html>
